;(function(root){
    function Progress(){
        this.durTime = 0;
        this.startTime = 0;
        this.frameId=null;
        this.lastPercent=0;//刚刚的时间
        this.init();
    }
    Progress.prototype={
        init(){
            this.getDom();
        },
        getDom(){
            this.curTime = document.querySelector('.curTime');
            this.circle = document.querySelector('.circle');
            this.frontBg = document.querySelector('.frontBg');
            this.totalTime = document.querySelector('.totalTime');
        },
        renderAllTime(time){
            this.durTime=time;
            time = this.formatTime(time);

            this.totalTime.innerHTML= time;
        },
        formatTime(time){
            time = Math.round(time);//四首五入
            var m = Math.floor(time/60);
            var s = time % 60;
            m = m < 10 ? '0' + m : m;
            s = s < 10 ? '0' + s : s;

            return m + ":" + s;
        },
        // 移动进度条
        move(per){
            var This = this;
            cancelAnimationFrame(this.frameId);
            this.lastPercent = per===undefined?this.lastPercent:per;
            this.startTime = new Date().getTime();
            frame();
            function frame(){
                var curTime = new Date().getTime();
                var per = This.lastPercent + (curTime - This.startTime) / (This.durTime * 1000);
                if(per<=1){
                    This.update(per);
                }else{
                    cancelAnimationFrame(This.frameId);
                }
                This.frameId = requestAnimationFrame(frame);
            }
        },
        update(per){
            var time = this.formatTime(per * this.durTime);
            this.curTime.innerHTML = time;
            this.frontBg.style.width = this.circle.style.left = per * 100 + '%';
            

        },
         //暂停进度条
         stop() {
            cancelAnimationFrame(this.frameId);
            var stopTime = new Date().getTime();
            this.lastPercent += (stopTime - this.startTime) / (this.durTime * 1000);
        }
    }

     //拖拽
     function Drag(obj) {
        this.obj = obj;
        this.starPointX = 0;
        this.startLeft = 0;
        this.percent = 0;
    }
    Drag.prototype = {
        init(){
            this.obj.addEventListener('touchstart',e=>{
                this.starPointX = e.changedTouches[0].pageX;
                this.startLeft = parseFloat(this.obj.style.left.split('%')[0]/100)*this.obj.offsetParent.offsetWidth;
                this.start && this.start(this.percent);
            })
            this.obj.addEventListener('touchmove',e=>{          
                this.disPointX = e.changedTouches[0].pageX - this.starPointX; //移动的距离
                var l = this.startLeft + this.disPointX;
                if(l<=0){
                    l=0;
                }else if(l>this.obj.offsetParent.offsetWidth){
                    l=this.obj.offsetParent.offsetWidth;
                }
                this.percent = l/this.obj.offsetParent.offsetWidth                 
                this.move && this.move(this.percent);
                e.preventDefault();
            });
            this.obj.addEventListener('touchend', ev=>{
                // this.obj.style.left=this.percent*100+'%';
                // console.log(this.obj.style.left)
                this.end && this.end(this.percent);              
            });
        
        }
    }

    
    function instanceProgress(){
        return new Progress();
    }
    function instancDrag(obj){
        return new Drag(obj);
    }
    root.progress = {
        pro:instanceProgress,
        drag:instancDrag
    }
})(window.player || (window.player = {}))